<template>
  <li
      @mouseenter="isMouseEnter=true"
      @mouseleave="isMouseEnter=false"
  >
    <label>
      <input
          type="checkbox"
          :checked="done"
          @click="props.changeDone(id)"
      />
      <span>{{ thing }}</span>
    </label>
    <button
        id="imp"
        class="btn btn-danger"
        :style="{display: isMouseEnter ? 'block' : 'none'}"
        @click="delTodo(id)"
    >删除
    </button>
  </li>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: "Item"
})
</script>

<script lang="ts" setup>
import {TodosType, TodoType} from "../modules/TodoList";
import {defineProps, ref, toRefs, useAttrs} from "vue";

// 控制鼠标移入的初始值
const isMouseEnter = ref(false)

// 接收List传递过来的值
interface propsType {
  todo: TodoType;  // todo
  changeDone(id: string): void  // changeDone
  delTodo(id: string): TodoType
}

const props = defineProps<propsType>()
const {id, thing, done} = toRefs(props.todo)
</script>

<style lang="scss" scoped>
/*item*/
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li #imp {
  float: right;
  display: none;
  margin-top: 3px;
  height: 32px;
  width: 50px;
  text-align: center;
  line-height: 32px;
  background: #ff3f00;
  color: white;
  font-weight: 900;
  border: 1px #ff3f00 solid;
  border-radius: 5%;
}

li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>